<template>
    <div class="search_wrap">
        <div class="f_v_t">
            <div class="f_v_t_left">
                <div class="f_s_w">
                    <div class="f_s_icon"></div>
                    <input
                    type="search"
                    v-model="groupSearchValue"
                    placeholder="请输入群关键字"
                    @keyup.enter="groupSearch"
                    /><img
                    v-show="groupSearchValue.trim() != ''"
                    @click.stop.prevent="groupSearchValue = ''"
                    src="static/image/home/clear_icon.png"
                    />
                </div>
            </div>
        </div>
        <div class="groupList">
            <div
                v-for="(item, index) in groupListShow"
                :key="'group_' + index"
                class="bg_hover"
                @click.stop.prevent="toNewChat(item, true)"
            >
                <img
                draggable="false"
                src="static/image/home/contact/group.png"
                class="img-border"
                style="
                    vertical-align: middle;
                    margin-right: 1em;
                    width: 3em;
                    height: 3em;
                "
                />
                <div
                style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                "
                >
                <b>{{ item.name }}</b>
                <p style="color: #cccccc">{{ item.memberToal }}人</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'myGroups',
    props:{
        groupList:{
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data(){
        return{
            groupSearchValue:'',
            groupListShow:null,
        }
    },
    watch:{
        groupSearchValue(){
            this.groupSearch()
        },
        groupList(){
            this.groupListShow = this.groupList
        }
    },
    methods:{
        //我的群组搜索
        groupSearch(){
            if(this.groupSearchValue){
                this.groupListShow = this.groupList.filter(i=>i.name.indexOf(this.groupSearchValue)>-1)
            }else this.groupListShow = this.groupList
        },
        toNewChat(i,b){
            this.$emit('toNewChat',i,b)
        }
    },
    mounted(){

    }
}
</script>

<style scoped>
.search_wrap{
    height: 100%;
}
.groupList{
    height: calc(100vh - 90px);
    overflow-y: auto;
}
</style>
